<template>
  <div class="px-5 py-4 bg-white">
    <el-row :gutter="0">
      <el-col :span="24" :xs="24">
        <!-- 标题 -->
        <HeadTitle text="报表管理"/>
      </el-col>
      <!-- 搜索 -->
    </el-row>
    <!-- 按钮 -->
    <el-row justify="space-between">
      <el-col :span="10">
        <div class="flex">
          <span
            v-for="(item, index) in report"
            :key="index"
            :class="[index == repActive ? 'rep_Active' : '', 'rep_item']"
            @click="repActive = index"
          >{{ item }}</span
          >
        </div>
      </el-col>
      <el-col :span="4">
        <el-date-picker v-model="value2" type="month" placeholder="Pick a month"/>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row :gutter="0" class="mt-4">
      <el-col :span="24">
        <Table
          :column="tableColumn"
          :table-data="userList"
          :option="option"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
          <template #btn>
            <el-button class="btn" icon="download">按医生导出</el-button>
            <el-button class="btn" icon="download">按科室导出</el-button>
          </template>
        </Table>
      </el-col>
    </el-row>

    <!-- 添加或修改部门对话框 -->
    <el-dialog :title="title" v-model="open" width="480px" append-to-body>
      <el-form ref="deptRef" :model="form" :rules="rules" label-position="top">
        <el-form-item label="请选择分配到的科室：" prop="status">
          <el-select v-model="queryParams.status" placeholder="全部" clearable class="w-full">
            <!-- <el-option
            v-for="dict in sys_normal_disable"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          /> -->
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm(deptRef)">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {ElMessageBox, FormInstance} from 'element-plus'
import {onMounted, reactive, ref, toRefs} from 'vue'

// const { sys_normal_disable }: any = useDict('sys_normal_disable')
const report = ref(['疗程报表', '设备报表', '健康报表'])
const repActive = ref(0)
const title = ref('')
const open = ref(false)
const value2 = ref()

interface fromType {
  deptId: number | undefined
  parentId: number | undefined
  deptName: string | undefined
  orderNum: number
  leader: string | undefined
  phone: number | undefined
  email: string | undefined
  status: string | undefined
}

interface queryType {
  pageNum: number
  pageSize: number
  deptName: string | undefined
  status: string | undefined
}

interface dataType {
  form: fromType
  queryParams: queryType
  rules: any
}

const data = reactive<dataType>({
  form: {
    deptId: undefined, //部门id
    parentId: undefined, //父级id
    deptName: undefined, //部门名称
    orderNum: 0, //显示顺序
    leader: undefined, //负责人
    phone: undefined, //电话
    email: undefined, //邮箱
    status: '0' //状态
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    deptName: undefined, //部门名称
    status: undefined //状态
  },
  rules: {
    parentId: [{required: true, message: '上级部门不能为空', trigger: 'blur'}],
    deptName: [{required: true, message: '部门名称不能为空', trigger: 'blur'}],
    orderNum: [{required: true, message: '显示排序不能为空', trigger: 'blur'}],
    email: [{type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}],
    phone: [
      {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur'}
    ]
  }
})

const {queryParams, form, rules} = toRefs(data)

//表格配置
const tableColumn = [
  {type: 'index', label: '序号', align: 'center', width: '100'},
  {prop: 'userId', label: '科室名称', align: 'center'},
  {prop: 'status', label: '负责人', align: 'center'},
  {prop: 'userId', label: '联系电话', align: 'center'},
  {prop: 'userId', label: '邮箱', align: 'center'},
  {
    label: '操作',
    align: 'center',
    slot: 'btn'
  }
] as Table.Column[]

interface State {
  userList: Array<object>
  option: Table.Option
}

const state = reactive<State>({
  userList: [
    {
      userId: '123',
      status: '123',
      createTime: '123',
      userId: '123'
    }
  ],
  option: {
    loading: false,
    showPagination: true,
    height: 630,
    paginationConfig: {
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  }
})
const {userList, option} = toRefs(state)

/** 取消按钮 */
const cancel = (): void => {
  open.value = false
  reset()
}
/** 表单重置 */
const reset = (): void => {
  form.value = {
    deptId: undefined,
    parentId: undefined,
    deptName: undefined,
    orderNum: 0,
    leader: undefined,
    phone: undefined,
    email: undefined,
    status: '0'
  }
}

/** 用户状态修改  */
const handleStatusChange = (row: any): void => {
  if (row.userName) {
    let text = row.status === '0' ? '启用' : '停用'
    ElMessageBox.confirm('确认要"' + text + '""' + row.userName + '"用户吗?', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        // return changeUserStatus(row.userId, row.status)
      })
      .catch(() => {
        row.status = row.status === '0' ? '1' : '0'
      })
  }
}

/** 提交按钮 */
const deptRef = ref<FormInstance>()
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (form.value.deptId != undefined) {
        // updateDept(form.value).then(() => {
        //   ElMessage.success('修改成功')
        //   open.value = false
        //   getList()
        // })
      } else {
        // addDept(form.value).then(() => {
        //   ElMessage.success('新增成功')
        //   open.value = false
        //   getList()
        // })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

/** 分页*/
const handleCurrentChange = (pageNum: number): void => {
  if (option.value.paginationConfig) {
    option.value.paginationConfig.currentPage = pageNum
    queryParams.value.pageNum = pageNum
  }
}

/** 分页*/
const handleSizeChange = (pageSize: number): void => {
  if (option.value.paginationConfig) {
    option.value.paginationConfig.pageSize = pageSize
    queryParams.value.pageSize = pageSize
  }
}
</script>
<style scoped lang="less">
.rep_item {
  width: 88px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0px;
  color: #4e5969;
  cursor: pointer;
}

.rep_Active {
  background: #e8fff8;
  color: #00a991;
  transition: 0.8s;
}

.btn {
  background: rgba(0, 169, 145, 0.1);
  color: #00a991;
}
</style>
